<template>
  <div class="con">
    <div class="list_title">
      <div class="text">工作纪实</div>
    </div>
    <div class="task_tabs">
      <el-tabs v-model="recordType" type="border-card" @tab-click="handleClick" class="el_tabs">
        <el-tab-pane
          :label="item.name"
          :name="item.id"
          v-for="(item, index) in boardTabsData"
          :key="index"></el-tab-pane>
      </el-tabs>
    </div>
    <div class="task_table" ref="task_table">
      <div class="li" v-for="(item, index) in boardData" :key="item.id">
        <div class="week_board_left_title" :ref="item.id" :id="item.id">
          <p class="week_board_left_title-1">{{ item.title }}{{ item.timeFrame }}</p>
          <span class="week_board_left_title-2" v-if="item.saveStatus == '1'" @click="cliOpen(item, index)">
            {{ item.isOpen ? '收起' : '展开' }}
          </span>
          <span class="week_board_left_title-2 warning" v-else>未提交</span>
        </div>
        <table class="week_look_table" v-if="item.isOpen">
          <tr v-if="recordType == '01-01' || recordType == '01-02'">
            <th>{{ recordType == '01-01' ? '本周工作纪实' : '本月工作小结' }}</th>
            <td>
              <div class="one_week" v-for="(oneweek, index) in item.nowNoteRelContentVOs" :key="index">
                <span>{{ index + 1 }}</span>
                <div class="one_week_content2">{{ oneweek.workContent }}</div>
                <div class="one_week_content1" v-if="oneweek.workTag">，{{ oneweek.workTag }}</div>
                <div class="one_week_content3" v-if="oneweek.finishStatus">
                  ，{{ oneweek.finishStatus == '1' ? '已完成' : '进行中' }}
                </div>
                <div v-if="oneweek.finishPercent">，完成量：{{ oneweek.finishPercent }}</div>
                <div class="one_week_content4" v-if="oneweek.workClassifyName">({{ oneweek.workClassifyName }})</div>
              </div>
              <div class="pre_line" v-html="removeHtmlStyle(item.workCon)"></div>
            </td>
          </tr>
          <tr v-for="(list, index) in item.dataDetail" :key="index">
            <th>{{ list.title }}</th>
            <td v-html="removeHtmlStyle(list.entryCont)"></td>
          </tr>
          <tr v-if="recordType == '01-01' || recordType == '01-02'">
            <th>{{ recordType == '01-01' ? '下周工作计划' : '下月工作计划' }}</th>
            <td>
              <div class="one_week" v-for="(oneweek, index) in item.planNoteRelContentVOs" :key="index">
                <span>{{ index + 1 }}</span>
                <div class="one_week_content2">{{ oneweek.workContent }}</div>
                <div class="one_week_content1" v-if="oneweek.workTag">，{{ oneweek.workTag }}</div>
                <div class="one_week_content4" v-if="oneweek.workClassifyName">({{ oneweek.workClassifyName }})</div>
              </div>
              <div class="pre_line" v-html="removeHtmlStyle(item.planCon)"></div>
            </td>
          </tr>

          <tr>
            <th>问题建议</th>
            <td>
              <div class="week_look_table_td" v-for="sugg in item.proConList" :key="sugg.id">
                <div class="attract_share_content" v-html="removeHtmlStyle(sugg.proCon)"></div>
                <div class="mar_upload" v-if="sugg.proFileList.length > 0">
                  <UploadPreview :fileList="sugg.enclosureList" :type="2" />
                </div>
              </div>
            </td>
          </tr>
          <tr>
            <th>图片/视频/附件</th>
            <td>
              <UploadPreview :fileList="item.albumList" type="2"></UploadPreview>
            </td>
          </tr>
          <template v-if="['01-01', '01-02', '01-03'].includes(recordType)">
            <tr v-if="item.suggestVO && item.suggestVO.id">
              <th>纪实回复</th>
              <td v-html="removeHtmlStyle(item.suggestVO.replayContent)"></td>
            </tr>
          </template>
        </table>
      </div>
      <div class="no_data" v-if="boardData.length === 0"><empty></empty></div>
    </div>
  </div>
</template>

<script>
import { getlistRecordNoteByType } from '@apis/api-intelligent.js'
import { getWeekRecordForm, getMonthRecordForm, getRecordDetailByPeriod } from '@apis/board.js'
import UploadPreview from '@com/UploadPreview/index.vue'
export default {
  name: 'FileRecord',
  components: { UploadPreview },
  props: {
    dataObj: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      recordType: '01-01',
      boardTabsData: [
        { name: '周纪实', id: '01-01' },
        { name: '月小结', id: '01-02' },
        { name: '季度总结', id: '01-03' },
      ],
      boardData: [],
      dataType: '',
    }
  },
  computed: {
    // ...mapState(),
  },
  watch: {
    dataObj: {
      handler(news) {
        if (news.year && news.userId) {
          this.pageInit()
        }
      },
      deep: true,
    },
  },
  created() {},
  mounted() {
    if (this.dataObj.userId && this.dataObj.year) {
      this.pageInit()
    }
  },
  methods: {
    pageInit() {
      this.recordType = '01-01'
      this.boardTabsData = [
        { name: '周纪实', id: '01-01' },
        { name: '月小结', id: '01-02' },
        { name: '季度总结', id: '01-03' },
      ]
      this.dataInit()
    },
    dataInit() {
      this.getlistRecordNoteByTypeForSelf()
    },
    getlistRecordNoteByTypeForSelf() {
      getlistRecordNoteByType({
        currentPage: 1,
        pageSize: 5,
        param: {
          recordType: this.recordType,
          userId: this.dataObj.userId,
          tenantId: localStorage.pskh_tenantId,
          year: this.dataObj.year,
          quarter: this.dataObj.quarter,
        },
      }).then(res => {
        const data = res.data.content.slice(0, 4)
        this.boardData = []
        for (const i in data) {
          const dataDetail = {
            dataDetail: [],
            suggestList: [],
            recordDoubleList: [],
            mainLeader: { isRepayAuth: '', mainLeaderSuggest: '' },
            formCode: '',
            saRecordRelTaskList: [],
          }
          data[i].isOpen = false
          const newData = Object.assign(data[i], dataDetail)
          this.boardData.push(newData)
        }
        // this.boardData = data
      })
    },
    handleClick(tab, event) {
      this.dataInit()
    },
    // 展开收起
    cliOpen(item, index) {
      console.log('cliOpen')
      this.boardData[index].isOpen = !this.boardData[index].isOpen
      if (item.isOpen) {
        this.rightCli(item, index)
      }
    },
    // 周月
    getZInit(id, index) {
      getWeekRecordForm({
        id: id,
        optionUserId: localStorage.pskh_userId,
        tenantId: localStorage.pskh_tenantId,
      }).then(res => {
        const data = res.data
        this.boardData[index].dataDetail = []
        this.boardData[index].suggestVO = data.suggestVO || {}
        if (data.formV1VO) {
          this.boardData[index].workCon = data.formV1VO.workCon
          this.boardData[index].planCon = data.formV1VO.planCon
          this.boardData[index].recordFileList = data.formV1VO.recordFileList
          this.boardData[index].proConList = data.formV1VO.proConList
        }
        if (data.formV2VO) {
          if (data.formV2VO.workConList && data.formV2VO.workConList.length) {
            this.boardData[index].nowNoteRelContentVOs = data.formV2VO.workConList.filter(item => {
              return item.workContent
            })
          }
          if (data.formV2VO.planConList && data.formV2VO.planConList.length) {
            this.boardData[index].planNoteRelContentVOs = data.formV2VO.planConList.filter(item => {
              return item.workContent
            })
          }
          this.boardData[index].recordFileList = data.formV2VO.recordFileList
          this.boardData[index].proConList = data.formV2VO.proConList
        }
      })
    },
    // 周月
    getYInit(id, index) {
      getMonthRecordForm({
        id: id,
        optionUserId: localStorage.pskh_userId,
        tenantId: localStorage.pskh_tenantId,
      }).then(res => {
        const data = res.data
        this.boardData[index].suggestVO = data.suggestVO || {}
        this.boardData[index].dataDetail = [
          {
            title: '政治表现及政治学习情况',
            entryCont: data.formV1VO.politicsCon || '',
          },
          {
            title: '工作亮点及创新情况',
            entryCont: data.formV1VO.innovateCon || '',
          },
          {
            title: '主要不足及具体事例',
            entryCont: data.formV1VO.lackCon || '',
          },
          {
            title: '奖惩情况',
            entryCont: data.formV1VO.rpCon || '',
          },
        ]
        if (data.formV1VO) {
          this.boardData[index].workCon = data.formV1VO.workCon
          this.boardData[index].planCon = data.formV1VO.planCon
          this.boardData[index].recordFileList = data.formV1VO.recordFileList
          this.boardData[index].proConList = data.formV1VO.proConList
        }
        if (data.formV2VO) {
          if (data.formV2VO.workConList && data.formV2VO.workConList.length) {
            this.boardData[index].nowNoteRelContentVOs = data.formV2VO.workConList.filter(item => {
              return item.workContent
            })
          }
          if (data.formV2VO.planConList && data.formV2VO.planConList.length) {
            this.boardData[index].planNoteRelContentVOs = data.formV2VO.planConList.filter(item => {
              return item.workContent
            })
          }
          this.boardData[index].recordFileList = data.formV2VO.recordFileList
          this.boardData[index].proConList = data.formV2VO.proConList
        }
      })
    },
    // 季度
    getJDInit(id, index) {
      getRecordDetailByPeriod({
        id: id,
        optionUserId: localStorage.pskh_userId,
        tenantId: localStorage.pskh_tenantId,
      }).then(res => {
        const data = res.data
        this.boardData[index].suggestVO = data.suggestVO || {}
        this.boardData[index].dataDetail = [
          {
            title: '本季度个人总结',
            entryCont: '',
            audioList: [],
            id: 'workCon',
            required: true,
            placeholder: '请输入本季度个人总结',
            minRows: 5,
          },
          {
            title: '教育培训情况',
            entryCont: '',
            id: 'eduCon',
            audioList: [],
            placeholder: '请输入教育培训情况',
          },
          {
            title: '奖惩情况',
            entryCont: '',
            id: 'rpCon',
            audioList: [],
            placeholder: '请输入奖惩情况',
          },
        ]
        this.boardData[index].dataDetail.forEach(item => {
          item.entryCont = data[item.id]
        })
        this.boardData[index].recordFileList = data.recordFileList
        this.boardData[index].proConList = data.proConList || []
      })
    },
    rightCli(item, index) {
      console.log('000000000')
      this.tabClick = true
      for (const i in this.boardData) {
        this.boardData[i].isOpen = false
      }
      setTimeout(() => {
        this.tabClick = false
      }, 3000)

      if (this.boardData[index].saveStatus === '1') {
        this.boardData[index].isOpen = true
        if (this.recordType === '01-01') {
          this.getZInit(item.id, index)
        } else if (this.recordType === '01-02') {
          this.getYInit(item.id, index)
        } else if (this.recordType === '01-03') {
          this.getJDInit(item.id, index)
        }
      }
      this.id = item.id

      const topMove = 52 * index
      const material = this.$refs.task_table
      this.$nextTick(() => {
        material.scrollTo({
          top: topMove,
          behavior: 'smooth',
        })
      })
    },
    removeHtmlStyle(html) {
      const rel = /style\s*?=\s*?([‘"])[\s\S]*?\1/g
      let newHtml = ''
      if (html) {
        newHtml = html.replace(rel, '')
      }
      return newHtml
    },
  },
}
</script>

<style lang="scss" scoped>
@import './title.scss';

.con {
  margin-top: 20px;
  /deep/.el-tabs--border-card {
    box-shadow: none;
    border: 0;
  }

  .task_table {
    padding: 10px;
    // margin: 0 10px;
    border: 1px solid #dcdfe6;
    border-top: 0;
    // display: flex;
    // justify-content: space-between;
    // flex-wrap: wrap;
    max-height: 500px;
    min-height: 200px;
    overflow-y: auto;

    .li {
      // width: 48%;
      font-size: 14px;
      font-weight: bold;
      color: #333;
      line-height: 40px;
      padding-left: 10px;
      cursor: pointer;

      &:hover {
        color: #0080ff;
      }
    }
  }

  .week_board_left_title {
    height: 40px;
    border-bottom: 2px solid #c5d0de;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .title_point {
    cursor: pointer;
  }

  .week_board_left_title-1 {
    font-size: 16px;
    font-weight: 600;
  }

  .week_board_left_title-2 {
    color: #1852a3;
    cursor: pointer;
  }
  .warning {
    color: #f56c6c;
    cursor: default;
  }

  .week_look_table {
    width: 100%;
    border-collapse: collapse;
    color: #606266;
    margin-bottom: 20px;

    .one_week {
      .one_week_top {
        word-break: break-all;
      }
    }

    tr {
      border: 1px solid #b5b5b5;
      line-height: 28px;

      th {
        width: 20%;
        border: 1px solid #b5b5b5;
        background-color: #f5f7fa;
        font-weight: bold;
        // text-align: right;
        padding: 0px 10px;
        word-break: break-all;
        text-align: left;
      }

      td {
        border: 1px solid #b5b5b5;
        text-align: left;
        padding: 5px 10px;
        width: 80%;
        word-break: break-all;
      }
    }

    // .week_look_table_td{
    //   >div:not(:last-child) {
    //     border-bottom: 1px solid #b5b5b5;
    //   }
    // }
    .week_look_table_td:not(:last-child) {
      border-bottom: 1px solid #b5b5b5;
    }

    .attract_share_content {
      white-space: pre-line;
    }
  }
}
</style>
